<template>
  <a-spin class="w-[100%]" :size="35" :loading="spinLoading" tip="正在处理, 请稍候...">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="订单号">
        {{ form.orderNumber }}
      </a-descriptions-item>
      <a-descriptions-item label="泊位号">
        {{ form.berthNumber }}
      </a-descriptions-item>
      <a-descriptions-item label="收费点">
        {{ form.pointCharge }}
      </a-descriptions-item>
      <a-descriptions-item label="车牌号">
        {{ form.plateNumber }}
      </a-descriptions-item>
      <a-descriptions-item label="驶入时间">
        {{ form.enterDate }}
      </a-descriptions-item>
      <a-descriptions-item label="驶离时间">
        {{ form.exitDate }}
      </a-descriptions-item>
      <a-descriptions-item label="停留时长">
        {{ form.stayDate }}
      </a-descriptions-item>
      <a-descriptions-item label="图片链接" :span="2">
        <template v-if="form.pictureUrl">
          <div class="flex flex-wrap gap-2">
            <a-link
              v-for="(url, index) in pictureUrls"
              :key="index"
              :href="url"
              target="_blank"
            >
              图片{{ index + 1 }}
            </a-link>
          </div>
        </template>
        <template v-else>无图片链接</template>
      </a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, watch, computed } from "vue";
import { getApi } from "~/api/tc/order.js";

//全局实例
const { proxy } = getCurrentInstance();
//加载中...
const spinLoading = ref(false);
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});
//表单
const form = reactive({
  //订单ID
  orderId: null,
  //订单号
  orderNumber: null,
  //泊位号
  berthNumber: null,
  //收费点
  pointCharge: null,
  //驶入时间
  enterDate: null,
  //驶离时间
  exitDate: null,
  //停留时长
  stayDate: null,
  //车牌号
  plateNumber: null,
  //图片链接
  pictureUrl: null,
});

// 计算属性：将图片链接字符串按逗号分割为数组
const pictureUrls = computed(() => {
  if (!form.pictureUrl) return [];
  return form.pictureUrl.split(",").map((url) => url.trim());
});

//加载订单详细信息
const loadOrderInfo = (orderId) => {
  spinLoading.value = true;
  getApi(orderId)
    .then((res) => {
      //数据赋值
      if (res) {
        for (let key in res) {
          if (form.hasOwnProperty(key)) {
            form[key] = res[key];
          }
        }
      }
    })
    .finally(() => {
      spinLoading.value = false;
    });
};
//监听参数变化
watch(
  () => props.params,
  (newVal, oldVal) => {
    //订单ID
    if (props.params.orderId) {
      //加载订单详情
      loadOrderInfo(props.params.orderId);
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scoped>
/* 树形组件点击会高亮，容易引起歧义，此处取消高亮样式 */
:deep(.arco-tree-node-selected .arco-tree-node-title, .arco-tree-node-selected
    .arco-tree-node-title:hover) {
  color: rgb(var(--color-text-1));
}
</style>
